import React, { Component } from 'react';
import './index.css';

export default class index extends Component {
  state = {
    bg: false
  };
  changeBg = (isShow) => {
    this.setState({
      bg: isShow
    });
  };

  updateTodoItem = (ev, item) => {
    this.props.updateTodoItem(ev.target.checked, item.id);
  };
  deleteTodoItem = (item) => {
    this.props.deleteTodoItem(item.id);
  };

  render() {
    let { listItem } = this.props;
    return (
      <li
        style={{ backgroundColor: this.state.bg ? '#ddd' : '' }}
        onMouseEnter={() => {
          this.changeBg(true);
        }}
        onMouseLeave={() => {
          this.changeBg(false);
        }}
      >
        <label>
          <input
            type="checkbox"
            checked={listItem.done}
            onChange={(ev) => this.updateTodoItem(ev, listItem)}
          />
          <span>{listItem.title}</span>
        </label>
        <button
          className="btn btn-danger"
          style={{ display: this.state.bg ? 'block' : 'none' }}
          onClick={() => {
            this.deleteTodoItem(listItem);
          }}
        >
          删除
        </button>
      </li>
    );
  }
}
